<template>
	<div class="flex-center" style="margin-top: 4px;">
		<div
			v-for="(item, index) in machineStateList"
			:key="index"
			class="flex-center"
			:style="{
				margin: `0 ${gap}`
			}"
			style="font-size: 14px;flex-direction: column;margin: 0 10px;"
		>
			<div class="flex-center" style="width: 60px;height: 22px;border-radius: 4px;" :style="{background: item.color}">{{ item.count || 0 }}</div>
			<div>{{ item.name }}</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            machineStateList: {
                type: Array,
                default() {
                    return [];
                }
            },
            gap: {
                type: String,
                default: '10px'
            }
        }
    };
</script>
